<template>
  <div :class="['section', 'create_feast']" @click="unmagnify">
    <p class="tip" v-if="userInfo">
      <em>{{userInfo.name}}</em>家的囍宴
    </p>
    <feast ref="feast"
           :master="userInfo ? userInfo.id : ''"
           :userInfo="userInfo">
    </feast>
    <div class="button" @click="create">
      <img src="../assets/images/button_bg.png">
      <p>生成囍宴，分享囍事</p>
    </div>
    <home></home>
    <dialogs ref="dialogs"
             :msg="currentDialogs.msg">
    </dialogs>
  </div>
</template>

<script>
  import feast from '@/components/feast';
  import dialogs from '@/components/dialogs';
  import home from '@/components/home';

  export default {
    name: 'createFeast',
    data: function () {
      return {
        getUserInfoPath: 'static/data/my_info.json',
        userInfo: null,
        currentDialogs: {},
        dialogs: {
          success: {
            msg: '囍宴摆好了，<br>快邀请亲朋好友入席！'
          },
          created: {
            msg: '囍宴已经生成过了！'
          }
        }
      }
    },
    components: {
      feast,
      dialogs,
      home
    },
    methods: {
      unmagnify: function () {
        let feast = this.$refs.feast;
        feast && feast.isActive ? feast.unmagnify() : '';
      },
      create: function () {
        if (this.$refs.feast.isCreate) {
          this.$set(this, 'currentDialogs', this.dialogs.created);
        } else {
          this.$set(this, 'currentDialogs', this.dialogs.success);
        }
        this.$set(this.$refs.dialogs, 'isShow', true);
      }
    },
    created: function () {
      axios.get(this.getUserInfoPath).then((res) => {
        this.$set(this, 'userInfo', res.data.myInfo);
      }).catch((error) => {
        console.log(error);
      });
    }
  }
</script>

<style lang="scss" scoped>
  @import "../assets/scss/config";

  .create_feast {
    padding-top: setRem(36px);

    .tip {
      color: #e7c598;
      font-size: setRem(20px);
      text-align: center;
      margin: auto setRem(45px);
      margin-bottom: setRem(28px);

      em {
        display: inline-block;
        border-bottom: 1px solid #e7c598;
        font-size: 1.2em;

        &:not(:empty) {
          padding: 0 setRem(4px);
        }
      }
    }

    .button {
      position: relative;
      width: setRem(230px);
      margin: auto;
      margin-top: setRem(32px);
      text-align: center;
      height: setRem(45px);

      img {
        position: absolute;
        left: -100%;
        right: -100%;
        top: 0;
        height: setRem(45px);
        margin: auto;
      }

      p {
        color: #E7C598;
        font-size: setRem(20px);
        line-height: setRem(45px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
</style>
